<template>
  <div>
    <a-row>
      <a-col   class='mb20'>
          <a-input  placeholder="请输入客户名称"  style="width: 300px"  v-model='search.keyWord'/>
          <a-select  style="width: 120px"  v-model='search.supOrBuyer'>
            <a-select-option value="">所有</a-select-option>
            <a-select-option value="1">供应商</a-select-option>
            <a-select-option value="2">买方</a-select-option>
            <a-select-option value="3" >供应商和买方</a-select-option>
            <a-select-option value="4">代理方</a-select-option>
            <a-select-option value="0">待确认</a-select-option>
          </a-select>
          <a-range-picker @change="onChange" />
          <a-select  style="width: 120px"  v-model='search.userCode'  placeholder='请选择录入人'  allowClear>
               <a-select-option v-for="d in userdata" :key="d.code">{{d.name}}</a-select-option>
          </a-select>
          <a-button type="primary"  @click='pageInit()'>搜索</a-button>
      </a-col>
    </a-row>
    <a-row  class='mb20'>
      <a-col :span="6">   
            <router-link  to='/contact/add'> <a-button type="primary" icon="plus-circle">新建</a-button></router-link>
        </a-col>
    </a-row>
    <a-table :columns="columns" :dataSource="data"  :pagination="pagination"  @change="handleTableChange"  :rowKey="record => record.code" >
      <!-- <span slot="customTitle">客户名称</span> -->
      <span slot='supOrBuyer'  slot-scope="text, record" >{{text | customType}}</span>
      <span slot='clientDate'  slot-scope="text, record" >{{text | formatDates}}</span>
      <span slot='date'  slot-scope="text, record" >{{text | formatDate}}</span>
      <span slot="action" slot-scope="text, record"  > 
        <router-link  :to='{path:"/contact/getInfo",query:{code:record.entCode,recordCode:record.code}}'  class='color-blue'>查看详情</router-link>
        <a-divider type="vertical" />
        
        <a-popconfirm title="确认删除当前数据？" @confirm="confirmDel(record.code)"   okText="确认" cancelText="取消">
            <a href="javascript:;"  class='color-red'>删除</a>
        </a-popconfirm>
      </span>
    </a-table>
  </div>
</template>

<script>
import  { ContactList,delContact }  from  '@/api/customer/index'
import  { listUser_of_system }  from  '@/api/system/index'
export default {
  name: 'customer',
  data () {
    return {
      columns:[{
        title: '日期',
        scopedSlots: { customRender: 'clientDate' },
        dataIndex: 'clientDate',
      }, {
        title:'客户名称',
        dataIndex: 'entName',
        scopedSlots: { customRender: 'entName' },
      }, {
        title: '客户类型',
        scopedSlots: { customRender: 'supOrBuyer' },
        dataIndex: 'supOrBuyer',
      }, {
        title: '联系人',
        dataIndex: 'contact',
      }, {
        title: '联系方式',
        dataIndex: 'phone',
      },{
        title: '录入人',
        dataIndex: 'createUserName',
      },
      {
        title: '创建日期',
        scopedSlots: { customRender: 'date' }, 
        dataIndex: 'createTime',
      },  
       {
        title: '操作',
        key: 'action',
        scopedSlots: { customRender: 'action' },
      }],
    
      search:{
          keyWord:'',
          supOrBuyer:'',

          pageSize:10,
          pageNo:1,
          orderBy:'',
          userCode:null,
          startDate:null,
          endDate:null,
      },
      userdata:[],/*搜索下拉 选择项*/
      
      data:[],
      pagination:{
          total:0,
          pageSize: 10,//每页中显示10条数据
          showSizeChanger: true,

          pageSizeOptions: ["10", "20"],//每页中显示的数据
          showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
        },  
    }
  },
  created(){
    this.pageInit()
    this.userList()
  },
  methods:{
    pageInit(){
      ContactList(this.search).then((res)=>{
        this.data = res.data.dataList
        this.pagination.total = res.data.totalRs
      })
    },
    userList(){
      listUser_of_system({pageSize:100}).then((res)=>{
        this.userdata = res.data.dataList
      })
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    onChange(date, dateString) {
        console.log(date, dateString);
        if(date.length == 0){
            this.search.startDate = null
            this.search.endDate = null
        }
        else{
            this.search.startDate = dateString[0]
            this.search.endDate = dateString[1]
        }
    },
    confirmDel(code){
      delContact(code).then((res)=>{
        this.$message.success(res.data.msg)
        this.pageInit()
      })
    },
    handleTableChange (pagination, filters, sorter) {
        // console.log(pagination);
        this.search.pageNo = pagination.current
        this.search.pageSize =pagination.pageSize
        this.pageInit()
    },
  },
  computed:{
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
